<template>
  <div class="page-nuxt">
    <h2>page-nuxt</h2>

    <h3>1.组件的方式</h3>
    <NuxtLink to="/">
      <button>home</button>
    </NuxtLink>
    <h3>2.通过navigateTo</h3>
    <NuxtLink @click="goToCategory">
      <button>NuxtLink category</button>
    </NuxtLink>
    <button @click="goToCategory">category</button>

    <h3>3.通过编程的方式进行导航</h3>
    <button @click="goToCart">cart</button>
    <button @click="goBack">Back</button>

    <!-- 是对router-view的封装 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

<script setup lang="ts">
  function goToCategory() {
    return navigateTo("/04_page-nuxt/category");
  }

  const router = useRouter();
  function goToCart() {
    router.push("/04_page-nuxt/cart");
  }

  function goBack() {
    router.back();
  }

  // 路由的守卫
  router.beforeEach((to, form) => {
    console.log(to);
    console.log(form);
  });
</script>

<style lang="less" scoped>
  .page-nuxt {
  }
</style>
